.tdoc .header-anchor {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -0.82em;
  font-weight: 500;
  user-select: none;
  opacity: 0;
  text-decoration: none;
  transition: color 0.25s, opacity 0.25s;
}

.tdoc .header-anchor::before {
  content: "#";
}

.tdoc h1,
.tdoc h2,
.tdoc h3,
.tdoc h4,
.tdoc h5,
.tdoc h6 {
  position: relative;
  font-weight: 700;
  outline: none;
  margin: 24px 0;
  color: #39c5bb;
}

.tdoc h1:hover .header-anchor,
.tdoc h1 .header-anchor:focus,
.tdoc h2:hover .header-anchor,
.tdoc h2 .header-anchor:focus,
.tdoc h3:hover .header-anchor,
.tdoc h3 .header-anchor:focus,
.tdoc h4:hover .header-anchor,
.tdoc h4 .header-anchor:focus,
.tdoc h5:hover .header-anchor,
.tdoc h5 .header-anchor:focus,
.tdoc h6:hover .header-anchor,
.tdoc h6 .header-anchor:focus {
  opacity: 1;
}

.tdoc h2 {
  display: block;
  border-bottom: 4px solid #4dd0e1;
}

.tdoc h2::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 50vw;
  height: 10px;
  border-top-right-radius: 24px;
  background: linear-gradient(90deg, transparent, #4dd0e1);
}

.has-sidebar {
  display: none;
}

.tdoc {
  @apply container rounded-3xl px-4 py-6 md:px-10 mb-8 duration-200 leading-8;
  background-color: var(--tdoc-bg-color);
  color: var(--tdoc-text-color);
}

.tdoc h1 {
  @apply text-3xl;
}

.tdoc h2 {
  @apply text-2xl;
}

.tdoc h3 {
  @apply text-xl;
}

.tdoc h4 {
  @apply text-lg;
}

.tdoc h5 {
  @apply text-base;
}

.tdoc h6 {
  @apply text-sm;
}

.tdoc p {
  @apply py-1;
}

.tdoc p code {
  @apply bg-[#4dd0e114] p-[2px] rounded-sm text-[#39C5BB];
}

.tdoc ul,
.tdoc ol {
  @apply pb-2 list-disc;
}

.tdoc ul li::marker {
  color: #39c5bb !important;
}

.tdoc ol li::marker {
  color: #39c5bb !important;
}

.tdoc li {
  @apply leading-10 ml-10;
}

.tdoc ol {
  list-style: lower-roman;
}

.tdoc div [class*="language-"] {
  @apply relative bg-slate-800 rounded-md py-4 my-4;
}

.tdoc div [class*="language-"] span.lang {
  @apply absolute right-4 top-2 text-white;
}

.tdoc div[class*="language-"] pre {
  @apply overflow-x-auto;
}

.tdoc div[class*="language-"] pre,
.tdoc div[class*="language-"] code {
  @apply whitespace-pre text-left;
}

.tdoc div [class*="language-"] > button.copy {
  @apply absolute top-3 right-3 z-10 border rounded-md w-9 h-9 bg-white cursor-pointer;
  direction: ltr;
  opacity: 0;
  background-image: var(--td-icon-copy);
  background-position: 50%;
  background-size: 20px;
  background-repeat: no-repeat;
  transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;
}

.tdoc div [class*="language-"] > button.copied {
  background-image: var(--td-icon-copied);
}

.tdoc div[class*="language-"]:hover button.copy {
  opacity: 1;
}

.tdoc div[class*="language-"] pre {
  margin-left: 3.5rem;
  padding-left: 1rem;
  vertical-align: middle;
}

.tdoc div[class*="language-"] .line-numbers-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  color: #e2e3e4;
  padding-top: 1rem;
  text-align: center;
}

.tdoc div[class*="language-"] .line-numbers-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 100%;
  border-radius: 6px 0 0 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.6);
}

.tdoc a {
  position: relative;
  color: #39c5bb;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.tdoc blockquote {
  @apply px-4 mr-5 my-6 rounded-md;
  border-left: 5px solid #39c5bb;
  background: var(--tdoc-bg-color);
}

.tdoc blockquote p {
  @apply py-3 pl-1;
}

.tdoc .custom-block.info {
  @apply m-1 pl-4 pr-2 rounded-md border-l-4 border-[#0085f2];
  background-color: #0085f21a;
}
.tdoc .custom-block {
  @apply leading-8 p-0;
}

.tdoc .custom-block.danger {
  @apply m-1 pl-4 pr-2 rounded-md border-l-4 border-[#ff2a51];
  background-color: #ff2a512a;
}

.tdoc .custom-block-title {
  display: none;
}
.tdoc table {
  @apply m-1 w-full;
  border-collapse: collapse;
  border-radius: 10px;
  background-color: var(--tdoc-bg-color);
  color: var(--tdoc-text-color);
  overflow: hidden;
}

.tdoc table th {
  @apply bg-[#39C5BB] px-4 py-3 text-left text-white border;
}
.tdoc table td {
  @apply px-4 py-2 border;
}
